<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-button fill="clear" (click)="previous($event)" [ariaLabel]="'core.back' | translate">
                <ion-icon slot="icon-only" name="fas-arrow-left" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
        <ion-title />
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="skip($event)" [ariaLabel]="'core.skip' | translate">
                {{'core.skip' | translate}}
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
    <div>
        <div class="ion-text-center ion-padding core-login-site-logo">
            <img src="assets/img/login_logo.png" class="avatar-full login-logo" [alt]="'core.login.logoof' | translate: { $a: appName }">
        </div>

        <h1 class="core-login-onboarding-step">
            {{'core.login.onboardingwelcome' | translate}}
        </h1>

        <div *ngIf="step === 0" class="core-login-onboarding-step">
            <ion-button expand="block" (click)="skip($event)" class="ion-margin-bottom" fill="outline">
                {{'core.login.onboardingimalearner' | translate}}
            </ion-button>
            <ion-button expand="block" (click)="next($event)" class="ion-margin-bottom" fill="outline">
                {{'core.login.onboardingimaneducator' | translate}}
            </ion-button>
        </div>

        <div *ngIf="step === 1" class="core-login-onboarding-step">
            <p class="core-login-onboarding-text">
                {{ 'core.login.onboardingtoconnect' | translate }}
            </p>
            <ion-button expand="block" (click)="skip($event)" class="ion-margin-bottom" fill="outline">
                {{ 'core.login.onboardingialreadyhaveasite' | translate }}
            </ion-button>
            <ion-button expand="block" (click)="next($event)" class="ion-margin-bottom">
                {{ 'core.login.onboardingineedasite' | translate }}
            </ion-button>
        </div>

        <div *ngIf="step === 2" class="core-login-onboarding-step">
            <ul class="core-login-onboarding-text ion-text-start">
                <li>
                    <ion-icon name="far-circle-check" aria-hidden="true" /> {{ 'core.login.onboardingcreatemanagecourses' | translate }}
                </li>
                <li>
                    <ion-icon name="far-circle-check" aria-hidden="true" /> {{ 'core.login.onboardingenrolmanagestudents' | translate }}
                </li>
                <li>
                    <ion-icon name="far-circle-check" aria-hidden="true" /> {{ 'core.login.onboardingprovidefeedback' | translate }}
                </li>
            </ul>

            <ion-button expand="block" (click)="gotoWeb($event)" class="ion-margin-bottom">
                {{ 'core.login.onboardinggetstarted' | translate }}
            </ion-button>
        </div>
    </div>
</ion-content>
